/**
 * 分页表格组件
 *
 * 接收外部查询参数，当参数变化时，进行查询操作
 * 组件内部自带分页功能，当分页参数变化时，进行查询操作
 *
 * 父组件传入的 doQuery 方法为查询方法
 * 查询时，会将当前的查询参数和分页参数传入给方法，接收符合格式的表格数据
 * 
 */
import { useAsyncEffect } from 'ahooks';
import { Table } from 'antd';
import { TableProps } from 'antd/es/table';
import React, { memo, useState } from 'react';

interface IProps extends TableProps<any> {
  /** 除了分页数据外，其它的所有参数 */
  searchInfo: any;
  /**
   * 查询接口
   * @param searchInfo 传入的查询参数
   * @param pageInfo 分页参数
   * @returns 表格数据
   */
  doQuery: (searchInfo: any, pageInfo: IPageInfo) => Promise<ITableInfo | undefined>;
}

/** 分页 */
interface IPageInfo {
  pageNum: number;
  pageSize: number;
}

/** 表格数据 */
interface ITableInfo {
  list: any[];
  total: number;
}

export default memo((props: IProps) => {
  const { rowKey, columns, searchInfo, doQuery, scroll, className } = props;

  // 表格是否在loading
  const [tableLoading, setTableLoading] = useState(true);
  // 表格信息
  const [tableInfo, setTableInfo] = useState<ITableInfo>({
    list: [],
    total: 0,
  });
  // 分页信息
  const [pageInfo, setPageInfo] = useState({
    pageNum: 1,
    pageSize: 10,
  });

  // 参数变化时，进行查询
  useAsyncEffect(async () => {
    setTableLoading(true);
    const res = await doQuery(searchInfo, pageInfo);
    setTableInfo(res || { list: [], total: 0 });
    setTableLoading(false);
  }, [searchInfo, pageInfo]);

  return (
    <>
      <Table
        rowKey={rowKey}
        className={className || ''}
        columns={columns}
        dataSource={tableInfo?.list || []}
        bordered
        loading={tableLoading}
        scroll={scroll || undefined}
        pagination={{
          current: pageInfo.pageNum,
          pageSize: pageInfo.pageSize,
          pageSizeOptions: [5, 10, 15, 20, 25, 30, 50, 100],
          total: tableInfo?.total || 0,
          hideOnSinglePage: false,
          showSizeChanger: true,
          showTotal: (total, range) => <div>共 {total} 条</div>,
          onChange: (pageNum, pageSize) => {
            setPageInfo({ pageNum, pageSize });
          },
          onShowSizeChange: (pageNum, pageSize) => {
            setPageInfo({ pageNum: 1, pageSize });
          },
        }}
      />
    </>
  );
});
